<template>
    <div class="home">
        <el-container>
            <el-header>
                <el-row class="header-row">
                    <!--顶部栏-->
                    <el-col :span="4" style="margin-top: 10px; height: 60px">
                        <img
                            style="width: 200px"
                            src="../../assets/易游logo.png"
                        />
                    </el-col>
                    <el-col :span="3" style="margin-left: 530px">
                        <el-dropdown v-if="token === null">
                            <div class="headFont" @click="login()">
                                <img
                                    src="../../img/Z80o180000013ulur1D76.jpg"
                                    class="headImg"
                                />
                                &nbsp;&nbsp;
                                <span>请登录</span>
                                <el-dropdown-menu slot="dropdown">
                                </el-dropdown-menu>
                            </div>
                        </el-dropdown>
                        <el-dropdown
                            v-if="token !== null"
                            @command="handleCommand1"
                        >
                            <div class="headFont">
                                <img
                                    src="../../img/Z80o180000013ulur1D76.jpg"
                                    class="headImg"
                                />
                                &nbsp;&nbsp;
                                <span>尊敬的...</span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    command="userRealBinds"
                                    icon="el-icon-user-solid"
                                    >个人信息</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-bank-card"
                                    >我的钱包</el-dropdown-item
                                >
                                <el-dropdown-item
                                    command="MyCollection"
                                    icon="el-icon-star-on"
                                    >我的收藏</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-notebook-2"
                                    >常用信息</el-dropdown-item
                                >
                                <el-dropdown-item
                                    command="card"
                                    icon="el-icon-postcard"
                                    >会员中心</el-dropdown-item
                                >
                                <el-dropdown-item
                                    command="quit"
                                    icon="el-icon-postcard"
                                    >退出登录</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="2">
                        <el-dropdown class="headOrder" @command="handleCommand">
                            <div>
                                <i class="el-icon-notebook-2"></i>
                                <span style="cursor: pointer">我的订单 </span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    command="goOrder"
                                    icon="el-icon-tickets"
                                    >全部订单</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-position"
                                    >机票+相关订单</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-office-building"
                                    >酒店订单</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-s-flag"
                                    >旅游订单</el-dropdown-item
                                >
                                <el-dropdown-item icon="el-icon-odometer"
                                    >火车订单</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="1">
                        <el-tooltip content="消息通知" placement="bottom">
                            <i class="el-icon-message-solid"></i>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="1">
                        <el-tooltip placement="bottom" effect="light">
                            <div slot="content">
                                <p style="color: blue; font-weight: bold">
                                    访问客服中心
                                </p>
                                <br />境内：95010或400-830-6666
                                <br />中国香港：+852-3008-3295
                                <br />中国澳门：+86-21 3406-4888
                                <br />中国台湾：+86-21 3406-4888
                                <br />其它国家和地区：+86-21 3406-4888
                            </div>
                            <i class="el-icon-user"></i>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="1">
                        <el-tooltip placement="bottom" effect="light">
                            <div slot="content">
                                <img
                                    src="../../img/易游二维码.png"
                                    style="width: 120px; height: 112px"
                                />
                                <img
                                    src="../../img/易游二维码.png"
                                    style="
                                        width: 120px;
                                        height: 112px;
                                        margin-left: 20px;
                                    "
                                />
                                <br />
                                <span style="font-size: 10px"
                                    >扫描下载携程手机App</span
                                >
                                <span style="font-size: 10px; margin-left: 24px"
                                    >添加携程福利官领优惠</span
                                >
                                <br />
                                <p
                                    style="
                                        font-size: 12px;
                                        font-weight: bold;
                                        margin-left: 20px;
                                    "
                                >
                                    携程旅行手机版>
                                </p>
                            </div>
                            <i class="el-icon-mobile-phone"></i>
                        </el-tooltip>
                    </el-col>
                    <!--面包屑导航-->
                    <div id="PersonalHomepage">
                        <div style="margin-top: 20px">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item
                                    v-for="(item) in breadList"
                                    :key="item.id"
                                    :to="{ path: item.path }"
                                    >{{ item.meta.title }}</el-breadcrumb-item
                                >
                            </el-breadcrumb>
                        </div>
                        <!--侧导航栏-->
                        <div id="PersonalHomepage-Navigation">
                            <el-row class="tac">
                                <el-col :span="12">
                                    <el-menu
                                        default-active="2"
                                        class="el-menu-vertical-demo"
                                        background-color="rgb(0, 149, 255)"
                                        text-color="#fff"
                                        active-text-color="#fff"
                                        style="width: 200px"
                                        router
                                    >
                                        <el-menu-item index="/PersonalHomepage">
                                            <span slot="title"
                                                ><h3>个人主页</h3></span
                                            >
                                        </el-menu-item>
                                        <el-submenu index="0">
                                            <template slot="title">
                                                <span><h3>个人信息</h3></span>
                                            </template>
                                            <el-menu-item-group>
                                                <el-menu-item index="UserEdit"
                                                    >查看个人信息</el-menu-item
                                                >
                                                <el-menu-item index="UserRealBinds"
                                                    >查看绑定实名信息</el-menu-item
                                                >
                                            </el-menu-item-group>
                                        </el-submenu>
                                    </el-menu>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="xs">
                            <el-main>
                                <!--路由出口-->
                                <router-view></router-view>
                            </el-main>
                        </div>
                    </div>
                </el-row>
            </el-header>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            // token验证.
            token: null,
            // 路由集合
            breadList: [],
        };
    },
    watch: {
        //初始化路由元信息
        $route() {
            this.getBreadcrumb();
        },
    },
    mounted() {
        // 获取token令牌
        this.getToken();
    },
    methods: {
        // 触发登录方法
        login() {
            this.$router.push({ name: "login" });
        },
        handleCommand1(command) {
            // 去到订单管理界面
            if (command === "card") {
                this.$router.push({ name: "card" });
            } else if (command === "MyCollection") {
                this.$router.push({ name: "MyCollection" });
            } else if (command === "quit") {
                this.message('退出成功', 'success')
                window.sessionStorage.removeItem("token");
                window.sessionStorage.removeItem("loginName");
                window.sessionStorage.removeItem("id");
                this.token = window.sessionStorage.getItem('token')
            } else if (command === "userRealBinds") {
                this.$router.push({ name: "UserRealBinds" });
            }
        },
        // 获取token令牌
        getToken() {
            this.token = sessionStorage.getItem("token");
        },
        handleCommand(command) {
            if (this.token !== null) {
                // 去到订单管理界面
                if (command === "goOrder") {
                    this.$router.push({ name: "OrderManager" });
                }
            } else {
                this.$router.push({ name: "login" });
            }
        },
        //导航栏点击事件
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        //导航栏点击事件
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //面包屑方法
        isHome(route) {
            return route.name === "home";
        },
        //面包屑方法定义首页
        getBreadcrumb() {
            let matched = this.$route.matched;
            //如果不是首页
            if (!this.isHome(matched[0])) {
                matched = [{ path: "/", meta: { title: "首页" } }].concat(
                    matched
                );
            }
            this.breadList = matched;
        },
        //面包屑方法
        created() {
            this.getBreadcrumb();
        },
        //消息提示框
        message (message, type) {
            this.$message({
                message: message,
                type: type
            })
        }
    },
};
</script>

<style scoped>
/* 头部row标签 */
.header-row {
    width: 1200px;
    margin: 0 auto;
    line-height: 80px;
}
.header-row i {
    width: 20px;
}
.headFont {
    width: 116px;
    height: 32px;
    border-radius: 90px;
    background-color: rgb(192, 237, 248);
    color: rgb(51, 169, 238);
    font-weight: bold;
    line-height: 30px;
}
.headFont:hover {
    cursor: pointer;
}
.headImg {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}
.headOrder {
    line-height: 30px;
    width: 100px;
}
.el-col-24 {
    width: 100px;
}
#PersonalHomepage {
    width: 1200px;
    height: 800px;
    margin-top: 100px;
}
#PersonalHomepage-Navigation {
    float: left;
    margin-top: 20px;
    border: 2px solid blanchedalmond;
}
.xs {
    float: left;
    width: 990px;
    margin-top: 20px;
    border: 2px solid rgb(0, 149, 255);
}
el-menu-item:hover {
    font-weight: bold !important;
}
</style>